<!--
/**
* Author: linchun
* Date: 2022-08-24 13:04
* Desc: CouponPopup 套票详情弹窗
*/
-->
<template>
  <view class="coupon-popup coupon-info_detail">
    <u-modal
      :show="showModal"
      show-cancel-button
      close-on-click-overlay
      :zoom="false"
      width="662rpx"
      class="coupon-detail__modal"
      @confirm="handleConfirm()"
      @cancel="close()"
    >
      <view class="modal-box flex-col">
        <u-swiper
          class="modal-swiper"
          :list="imageList"
          :indicator="imageList.length > 1"
          indicator-active-color="#4bcfdb"
          indicator-inactive-color="#fff"
          :height="'520rpx'"
          indicator-mode="line"
          circular
        ></u-swiper>
        <view class="modal-content flex-col">
          <view class="name fc-primary mb10">
            {{ info.name }}
          </view>
          <view class="price-coupon">
            <view class="flex-s-m mb10" v-if="num > 0">
              <view class="">
                售价￥{{ $utils.toFixed(info.saleTotalPrice) }} ，本单可用{{
                  num
                }}张
              </view>
              <view class="" v-if="diffPriceSum(info)">
                ，补差￥{{ diffPriceSum(info) }}
              </view>
              <view v-if="calcPackageDiscountPrice(info)"
                >，
                <text class="fc-yellow">
                  省￥{{ calcPackageDiscountPrice(info) }}
                </text>
              </view>
            </view>
            <view
              v-for="item in info.package"
              :key="item.couponId"
              class="mb10"
            >
              <view class="flex-b-m mb10">
                <view>
                  {{ item.name }}
                </view>
                <view> X{{ item.number }} </view>
              </view>
              <view class="expireTimeDes"> 有效期：{{ item.validity }} </view>
            </view>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>
<script>
  export default {
    name: 'coupon-popup',
    components: {},
    props: {
      showModal: Boolean,
      info: {
        type: Object,
        default: () => {
          return {}
        }
      },
      num: [String, Number], // 套票可用张数
      discountPrice: [String, Number]
    },
    data() {
      return {}
    },
    mounted() {
      this.init()
    },
    computed: {
      imageList() {
        return this.info.image || []
      }
    },
    methods: {
      init() {},
      close() {
        this.$emit('cancel')
      },
      handleConfirm() {
        this.close()
        this.$emit('confirm')
      },
      diffPriceSum(item) {
        //补差计算
        const num = this.$utils.isNaNStr(this.num)
        const diffPrice = this.$utils.isNaNStr(item.diffPrice)
        const p = num * diffPrice
        return this.$utils.toFixed(p)
      },
      // 计算券包立省金额
      calcPackageDiscountPrice(item = {}) {
        const siglePrice = this.$utils.isNaNStr(item.siglePrice) // 套票单张价格
        const singleSalePrice = this.getSingleSalePrice() // 单个座位价格
        const num = this.num
        const p = (singleSalePrice - siglePrice) * num
        return this.$utils.toFixed(p)
      },
      // 获取单张票价
      getSingleSalePrice() {
        return this.$utils.isNaNStr(this.discountPrice)
      }
    }
  }
</script>
<style lang="scss">
  .coupon-popup {
    .modal-box {
      width: 100%;
      .modal-swiper {
        width: 100%;
        height: 520rpx;
      }
      .modal-content {
        font-size: 28rpx;
        padding: 30rpx;
        .name {
          font-weight: bold;
        }
        .price-coupon {
          font-size: 24rpx;
        }
        .expireTimeDes {
          font-size: 22rpx;
          color: #888;
        }
      }
    }
  }
</style>
